<script setup>
import {defineComponent, ref, watch, onMounted} from 'vue';
import ListOption from "@/components/todoItem/ListOption.vue";
import AddOption from "@/components/todoItem/AddOption.vue";
import MyFoot from "@/components/todoItem/MyFoot.vue";



const todoList = ref(localStorage.getItem("todoList") ? JSON.parse(localStorage.getItem("todoList")) : []);

// 添加待办事项的方法
const addTodo = (titleObject) => {
  console.log("收到了title信息", titleObject);
  // 示例：添加新的todo项
  todoList.value.push(titleObject);
};

const clearDone = () => {
  todoList.value = todoList.value.filter(item => !item.status);
}

// 定义组件名称和选项
defineComponent({
  name: "ToDoComponent",
  components: {
    ListOption,
    AddOption,
    MyFoot
  },
  data:  () => ({
    // todoList: todoList
  })

});
// 监听 todoList 变化并缓存到 localStorage
watch(
    () => [...todoList.value], // 深度监听数组内容变化
    (newVal) => {
      console.log("todoList changed", newVal);
      localStorage.setItem("todoList", JSON.stringify(newVal));
    },
    { deep: true }
);

</script>

<template>
  <div class="todo">
    <AddOption :add-todo="addTodo" />
    <ListOption :todo-list="todoList" />
    <MyFoot :clearDone="clearDone" :todoList="todoList"/>
  </div>
</template>

<style scoped>
.todo {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.add {
  margin-bottom: 20px;
}

input[type="text"] {
  width: 100%;
  height: 40px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

input[type="text"]::placeholder {
  color: #888;
}

.ListOption {
  margin-top: 20px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

input[type="checkbox"] {
  margin-right: 10px;
}

span {
  flex-grow: 1;
  font-size: 16px;
  color: #333;
}

.completed span {
  text-decoration: line-through;
  color: #888;
}


</style>
